<template>
  <div>
    <div class="nav">
      <div class="nav-content">
        <router-link class="link" active-class="to_active" to="/developmentguide/baseDocument">
          基础文档
        </router-link>
        <router-link class="link" active-class="to_active" to="/developmentguide/research">
          商家自研
        </router-link>
        <router-link class="link" active-class="to_active" to="/developmentguide/appServe">
          软件服务商
        </router-link>
        <router-link class="link" active-class="to_active" to="/developmentguide/appShop">
          APP开店
        </router-link>
        <router-link class="link" active-class="to_active" to="/developmentguide/designPlatform">
          设计平台
        </router-link>
        <router-link class="link" active-class="to_active" to="/developmentguide/IOT">
          IOT平台
        </router-link>
        <router-link class="link" active-class="to_active" to="/developmentguide/commonlyTools">
          常用工具
        </router-link>
      </div>
    </div>
     <!-- 下面的div盒子 -->
     <div>
        <router-view></router-view>
     </div>
      
  </div>
</template>

<script>
import BaseDocument from './baseDocument/index.vue'
import Research from './research/index.vue'
import AppServe from './appServe/index.vue'
import AppShop from './appShop/index.vue'
import DesignPlatform from './designPlatform/index.vue'
import IOT from './IOT/index.vue'
import CommonlyTools from './commonlyTools/index.vue'
export default {
  name: "developmentGuide",
  components:{
    BaseDocument,
    Research,
    AppServe,
    AppShop,
    DesignPlatform,
    IOT,
    CommonlyTools,
  },
  data(){
    return {
      isShow: 1,
    }
  },
};
</script>

<style lang="less" scoped>
.nav {
  background-color: #f7f8fa;
  width: 100%;
  padding: 24px 0;
  .nav-content{
    display: flex;
    width: 1270px;
    height: 32px;
    margin:auto;
    .link{
      margin-left: 32px;
      display: block;
      padding: 5px 20px;
      color: #323233;
      background-color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }
    .to_active {
      color: #fff;
      background-color: #155bd4;
      cursor: default;
    }
  }
}

</style>